<template>
    <v-container>
        <div id="player"></div>
    </v-container>
</template>

<script>
    import 'aplayer/dist/APlayer.min.css';
    import Aplayer from 'aplayer';
    import ColorThief from "../../assets/js/plugins/color-thief/color-thief";

    export default {
        name: "aplayer",
        data: () => ({
            musitList: []
        }),
        methods: {
            initPlayer() {
                const ap = new Aplayer({
                    container: document.getElementById('player'),
                    listFolded: true,
                    listMaxHeight: 5,
                    preload: 'auto',
                    autoplay: false,
                    fixed: true,//吸底模式
                    // mini: true,//迷你模式
                    lrcType: 3,
                    audio: this.musitList
                });
                //颜色自取
                const colorThief = new ColorThief();
                const setTheme = (index) => {
                    //歌曲无主题
                    if (!ap.list.audios[index].theme) {
                        colorThief.getColorAsync(ap.list.audios[index].cover, function () {
                            ap.theme('rgb(${color[0]},${color[1]},${color[2]})', index);
                        });
                    }
                };
                setTheme(ap.list.index);
                ap.on('listswitch', (index) => {
                    setTheme(index.index);
                })
            },
            //获取音乐列表
            getMusicList() {
                this.$axios.post("/api/music/getMusicList",
                    this.$qs.stringify({
                        createby: 2,
                    })).then(res => {
                    let result = res.data;
                    let data = result.data;
                    if (result && result.code === 200) {
                        this.musitList.push(...data);
                        this.initPlayer();
                    }
                })
            },
        },
        mounted() {
            this.getMusicList();
        }
    }
</script>

<style scoped>

</style>